<template>
	<div>
		<el-descriptions title="机构管理">
			<el-descriptions-item>
				<el-row :gutter="20">
					<el-col :span="6">
						<el-input v-model="filterText" style="width: 15vw; margin: 5px" size="mini" placeholder="查询" />
						<el-scrollbar :style="{ 'height': screenHeight - 220 + 'px', }">
							<el-tree 
								:data="treeData"
								node-key="id"
								:props="defaultProps"
								:default-expanded-keys="defaultExpandedKeys"
								ref="refTree"
								@node-click="onNodeClick"
								:filter-node-method="filterNode"
								highlight-current
								:default-expand-all="false"
								:expand-on-click-node="false"
							/>
						</el-scrollbar>
					</el-col>
					<el-col :span="18">
						<el-button type="primary" size="mini" @click="addRow" plain>新增</el-button>
						<el-table border :data="tableTreeData" size="mini" style="width: 100%">
							<el-table-column prop="name" label="机构名称" width="120" />
							<el-table-column prop="cName" label="机构简称" width="120" />
							<el-table-column prop="comNo" label="区划代码" width="120" />
							<el-table-column prop="orderBy" label="排序" width="120" />
							<el-table-column prop="addrs" label="地址" width="240" />
							<el-table-column prop="tel" label="联系电话" width="120" />
							<el-table-column prop="remark" label="备注" />
							<el-table-column fixed="right" label="操作" width="180">
								<template #default="scope">
									<el-button type="primary" size="mini" @click.prevent="editRow(scope.row)"> 编辑 </el-button>
									<el-button type="danger" size="mini" @click.prevent="deleteRow(scope.row)"> 删除 </el-button>
								</template>
							</el-table-column>
						</el-table>
						<el-pagination
							:page-sizes="[10]"
							layout="total, sizes, prev, pager, next, jumper"
							:total="pager.total" 
							@current-change="handleCurrentChange"
						>
						</el-pagination>
					</el-col>
				</el-row>
			</el-descriptions-item>
		</el-descriptions>
		<el-drawer v-model="centerDialogVisible" title="机构编辑" :size="420">
			<el-form :model="form" label-width="120px">
				<el-form-item label="上级单位：">
					<h2>{{ form.superiorName }}</h2>
				</el-form-item>
				<el-form-item label="机构名称：">
					<el-input v-model="form.name"></el-input>
				</el-form-item>
				<el-form-item label="机构简称：">
					<el-input v-model="form.cName"></el-input>
				</el-form-item>
				<el-form-item label="区划代码：">
					<el-input v-model="form.comNo"></el-input>
				</el-form-item>
				<el-form-item label="地址">
					<el-input v-model="form.addrs"></el-input>
				</el-form-item>
				<el-form-item label="联系电话">
					<el-input v-model="form.tel"></el-input>
				</el-form-item>
				<el-form-item label="排序">
					<el-input v-model="form.orderBy"></el-input>
				</el-form-item>
				<el-form-item label="备注">
					<el-input v-model="form.remark" type="textarea"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onSubmit">确定</el-button>
					<el-button @click="centerDialogVisible = false">取消</el-button>
				</el-form-item>
			</el-form>
		</el-drawer>
	</div>
</template>
<script lang="ts">
import { toRefs, reactive, defineComponent, ref, watch } from 'vue';
import { queryOrgans, saveOrgan, delOrgan } from '../../../api/organ/index';
import { ElMessageBox, ElMessage } from 'element-plus';

export default defineComponent({
	name: 'systemDic',
	components: {},
	setup() {
		const form = reactive({
			id: '',
			superiorId: 0,
			superiorName: '',
			name: '',
			cName: '',
			comNo: '',
			addrs: '',
			tel: '',
			remark: '',
			orderBy:0
		});
		const options = ref([
			{
				value: true,
				label: '是',
			},
			{
				value: false,
				label: '否',
			},
		]);
		const state = reactive({
			screenHeight: document.body.clientHeight,
			defaultExpandedKeys:[],
			treeData: [{}],
			defaultProps: {
				children: 'children',
				label: 'label',
				iconClass: 'iconClass',
			},
			tableTreeData: [],
			centerDialogVisible: false,
			filterText: '',
			currentNode: {
				id: '',
				label: '',
			},
			pager:{
				page:1,
				pId:null,
				total:0
			}
		}); 
		(async function () {
			await initOrgans();
		})();
		async function initOrgans() {
			await queryOrgans({page:state.pager.page,pId:state.pager.pId}).then((res: any) => {
				if(!state.currentNode?.id && res.data.tree.length > 0){
					state.defaultExpandedKeys = [res.data.tree[0].id]
					console.log(state.defaultExpandedKeys);
					state.treeData = res.data.tree;
				}
				state.tableTreeData = res.data.data; 
				state.pager.total  = res.data.totalCount;
			});
		}
		function onNodeClick(node: any) {
			if(state.currentNode.id == node.id){
				return;
			}
			state.currentNode = node;
			state.pager.pId = node.id;
			initOrgans();
		}
		async function deleteRow(row: any) {
			await ElMessageBox.confirm('是否刪除?')
				.then(() => {
					delOrgan({ ids: [row.id] }).then((res: any) => {
						if (res.success) {
							state.currentNode = null;
							initOrgans();
							ElMessage({
								message: '操作成功',
								type: 'success',
							});
						}
					});
				})
				.catch(() => {});
		}
		function editRow(row: any) {
			state.centerDialogVisible = true;
			const data = state.tableTreeData.find((x: any) => x.id == row.id) as any;
			form.superiorId = data.superiorId;
			form.remark = data.remark;
			form.name = data.name;
			form.cName = data.cName;
			form.comNo = data.comNo;
			form.addrs = data.addrs;
			form.tel = data.tel;
			form.id = row.id;
			form.orderBy = data.orderBy;
		}
		function addRow() {
			if (!state.currentNode.id) {
				ElMessage({
					message: '请选择上级机构',
					type: 'warning',
				});
				return false;
			}
			form.id = '';
			form.remark = '';
			form.name = '';
			form.cName = '';
			form.comNo = '';
			form.addrs = '';
			form.tel = '';
			state.centerDialogVisible = true;
			form.superiorName = state.currentNode.label ?? '';
			form.superiorId = Number(state.currentNode.id) ?? 0;
			form.orderBy = 0;
		}
		function change(value: any) {
			form.superiorName = value == 0 ? '' : state.currentNode.label ?? '0';
			form.superiorId = value == 0 ? 0 : Number(state.currentNode.id) ?? 0;
		}
		async function onSubmit() {
			await saveOrgan(form).then((res: any) => {
				if (res.success) {
					ElMessage({ message: '操作成功', type: 'success' });
					state.centerDialogVisible = false;
					state.currentNode = null;
					initOrgans();
				}
			});
		}
		function filterNode(value: String, data: any) {
			if (!value) return true;
			return data.label.includes(value);
		}
		const refTree = ref();
		watch(
			() => state.filterText,
			(val) => {
				refTree.value.filter(val);
			}
		);
		function handleCurrentChange(page:number){
			state.pager.page = page;
			initOrgans();
		}
		function filterOrgan(node:any){
			//state.treeData
		}
		return {
			state,
			onSubmit,
			addRow,
			editRow,
			deleteRow,
			onNodeClick,
			options,
			form,
			change,
			filterNode,
			refTree,
			handleCurrentChange,
			...toRefs(state),
		};
	},
});
</script>

<style scoped>

/deep/ .el-tree {
  width: 100%;
}
 
/deep/ .el-tree > .el-tree-node {
  display: inline-block;
  min-width: 100%;
}
.el-aside {
	color: var(--el-text-color-primary);
	text-align: center;
	background-color: transparent;
	width: 320px;
}

.el-main {
	color: var(--el-text-color-primary);
	text-align: center;
	height: 720px;
}
button {
	float: left;
	margin-bottom: 10px;
}
</style>
